<!--  -->
<template>
  <div class="EditMenu">
    <el-dialog
      :visible="isEdihtDialogVisible"
      :close-on-click-modal="false"
      width="700px"
      :modal-append-to-body="false"
      :show-close="false"
      :top="`8vh`"
    >
      <BaseDialogHead
        slot="title"
        title="编辑菜单"
        icon-class="chuangjiankuangchi16px"
        @handleCloseDialog="handleCloseDialog"
      />

      <div class="fromcontent">
        <el-form
          ref="ruleForm"
          v-loading="loading"
          label-position="left"
          :model="menuForm"
          :rules="rules"
          label-width="100px"
          class="PersonalInfo__ruleForm"
        >
          <el-form-item label="菜单" prop="ismenu">
            <el-radio-group v-model="menuForm.ismenu">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="父级" prop="pid">
            <el-cascader
              v-model="menuForm.pid"
              :options="roles"
              :props="cascaderProps"
              :show-all-levels="false"
              @change="handleCascaderChange"
            />
            <span style="padding-left: 20px">注：不选择则为根目录</span>

          </el-form-item>

          <!-- <el-form-item v-if="menuForm.ismenu === 2" label="方法" prop="method">
            <el-input
              v-model="menuForm.method"
              placeholder="请输入请求方法:PUT、POST、GET"
              class="input-width"
            />
          </el-form-item> -->

          <el-form-item :label="menuForm.ismenu === 1 ? '路由路径': '请求路径'" prop="path">
            <el-input
              v-model="menuForm.path"
              :placeholder="menuForm.ismenu === 1 ? '请输入前端路由路径': '请输入请求路径'"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="组建路径" prop="component">
            <el-input
              v-model="menuForm.component"
              placeholder="请输入组建路径"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="组建标识" prop="name">
            <el-input
              v-model="menuForm.name"
              placeholder="请输入 name 组建路径"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="是否隐藏" prop="hidden">
            <el-radio-group v-model="menuForm.hidden">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- <p>以下是在 meta 标签</p> -->
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="menuForm.title"
              placeholder="请输入菜单栏标题"
              class="input-width"
            />
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="图标" prop="icon">

            <el-input v-model="menuForm.icon" placeholder="请输入路由侧边栏图标" class="input-with-select">
              <el-link
                slot="append"
                href="https://element.eleme.cn/2.14/#/zh-CN/component/icon"
                target="_blank"
              >搜索图标</el-link>
            </el-input>
          </el-form-item>

          <el-form-item v-if="menuForm.ismenu === 1" label="activeMenu" prop="activeMenu">
            <el-input
              v-model="menuForm.activeMenu"
              placeholder="强制修改地址栏url"
              class="input-width"
            />
          </el-form-item>

          <el-form-item label="权重" prop="weigh">
            <el-input v-model="menuForm.weigh" class="input-width" />
          </el-form-item>

          <el-form-item label="接口列表" prop="route_list">
            <el-input v-model="menuForm.route_list" :rows="4" type="textarea" />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="menuForm.remark" :rows="3" type="textarea" />
          </el-form-item>

        </el-form>
      </div>

      <div slot="footer" class="footer">
        <el-button
          class="footer__btn"
          type="primary"
          :loading="loading"
          @click="submitForm"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseDialogHead from '@/components/BaseDialogHead'
import { validateRoleUser } from '@/utils/validate'
import { menu_update } from '@/api/menu'

export default {
  name: 'EditMenu',
  // import引入的组件需要注入到对象中才能使用
  components: {
    BaseDialogHead
  },
  props: {
    isEdihtDialogVisible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
      default: function() {
        return {
          hidden: 0,
          activeMenu: '',
          component: '',
          ismenu: 1,
          method: '',
          name: '',
          icon: '',
          title: '',
          pid: 0,
          weigh: 0,
          remark: '',
          path: ''
        }
      },
      require: true
    }
  },
  data() {
    // 这里存放数据
    return {
      cascaderProps: {
        label: 'title',
        value: 'id',
        checkStrictly: true, // 开启互不关联
        emitPath: false // value 只为选中那个id，如果true则返回选中以及父级id的数组
      },
      menuForm: {
        hidden: 0,
        activeMenu: '',
        component: '',
        ismenu: 1,
        method: '',
        name: '',
        icon: '',
        title: '',
        pid: 0,
        weigh: 0,
        remark: '',
        path: '',
        route_list: ''
      },
      rules: {
        path: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组建路径', trigger: 'blur' }
        ],
        // name: [
        //   { required: true, message: '请输入组建路径', trigger: 'blur' }
        // ],
        title: [
          { required: true, message: '请输入菜单栏标题', trigger: 'blur' }
        ],
        method: [
          { required: true, message: '请输入请求方法', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  // 监听属性 类似于data概念
  computed: {
    roles() {
      return this.$parent.dataList
    }
  },
  // 监控data中的数据变化
  watch: {
    // 输入时候转化大写
    'menuForm.method': {
      handler(val, oldVal) {
        this.menuForm.method = val.toUpperCase()
      },
      deep: true
    },
    async isEdihtDialogVisible(newVal) {
      if (newVal) {
        // 获取 roleId
        const str = JSON.stringify(this.editData)
        const jsonStr = JSON.parse(str)
        this.menuForm = jsonStr
        const routeStr = JSON.parse(jsonStr.route_list)
        this.menuForm.route_list = `${routeStr}`.replace(/,/g, '\n')
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    handleCascaderChange(value) {
      console.log(value)
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.postEditMenu()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async postEditMenu() {
      this.loading = true
      try {
        const postData = this.menuForm
        postData.route_list = JSON.stringify(postData.route_list.split('\n'))
        await menu_update(postData.id, postData)

        this.$messageOnce({
          message: '菜单修改成功！',
          type: 'success'
        })

        // 调用父组件方法更新 table
        await this.$parent.getMenuList()

        // 向父组件关闭弹窗
        this.handleCloseDialog()
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    handleCloseDialog() {
      this.$emit('RoleEditClose')
      this.$refs.ruleForm.resetFields()
    },
    resetData() {
      // 初始化数据
      Object.assign(this.$data, this.$options.data())
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.EditMenu {
 .fromcontent {
    height: 70vh;
    overflow-y: scroll;
  }

  .fromcontent::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  /*滚动条的轨道*/
  .fromcontent::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*滚动条的滑块按钮*/
  .fromcontent::-webkit-scrollbar-thumb {
    width: 8px;
    height: 238px;
    background: $MainColor;
    border-radius: 5px;
  }
  /*滚动条的上下两端的按钮*/
  .fromcontent::-webkit-scrollbar-button {
    height: 0;
  }

  .PersonalInfo__ruleForm {
    width: 500px;
    margin: 30px auto;

  }

  .footer {
    text-align: center;
    height: 80px;
    line-height: 80px;
    &__btn {
      @include SecondButton();
    }
  }
}

::v-deep .el-dialog__body {
  // padding: 30px 60px;
  padding: 0;
}

::v-deep .el-dialog__footer {
  padding: 0 60px;
  box-shadow: 0px -5px 20px 0px rgba(71, 73, 155, 0.06);
}
</style>
